<template>
  <div style="display: flex;justify-content: space-evenly;flex-wrap: wrap">
    <!-- 示例 1: 内部路由链接 -->
    <ElLinkPlus to="/user/profile">内部路由链接</ElLinkPlus>

    <!-- 示例 2: 带查询参数的内部路由链接 -->
    <ElLinkPlus :to="{ path: '/home', query: { id: 1 } }">带查询参数的内部路由链接</ElLinkPlus>

    <!-- 示例 3: 外部链接 -->
    <ElLinkPlus href="https://example.com"> 外部链接</ElLinkPlus>

    <!-- 示例 4: 指定 hash 路由模式的内部路由链接 -->
    <ElLinkPlus to="/about" routerMode="history">指定 history 路由模式的内部路由链接</ElLinkPlus>

    <!-- 内部路由链接，带前置图标 -->
    <ElLinkPlus to="/dashboard" preIcon="el-icon-edit">
      文字前图标
    </ElLinkPlus>
    <!-- 外部链接，带后置图标 -->
    <ElLinkPlus href="https://example.com" postIcon="el-icon-share">
      文字后图标
    </ElLinkPlus>
    <!-- 自定义样式 -->
    <el-link-plus
        href="https://example.com"
        :hover-effect="true"
        :custom-class="['custom-link', { 'bold-text': true }]"
        :custom-style="{ fontSize: '18px', padding: '8px 12px' }"
        post-icon="el-icon-arrow-right"
    >
      自定义样式
    </el-link-plus>
    <!-- 标记为下载的外部链接 -->
    <ElLinkPlus
        href="https://example.com/somefile.pdf"
        isExternalDownloadLink
        downloadFilename="renamed_file.pdf"
    >
      标记为下载的外部链接
    </ElLinkPlus>
    <el-link-plus
        :to="''"
        @before-click="onBeforeClick"
        @after-click="onAfterClick"
        @click="onClick"
    >
      监听 before-click 和 after-click 事件
    </el-link-plus>
    <!-- 启用预加载功能 -->
    <ElLinkPlus to="/about" preloadOnHover>启用预加载功能</ElLinkPlus>
    <el-link-plus
        to="/notifications"
        :badge="3"
        pre-icon="el-icon-bell"
    >
      通知中心
    </el-link-plus>

    <el-link-plus
        href="/messages"
        :badge="{ value: 150, max: 99 }"
        post-icon="el-icon-message"
    >
      未读消息
    </el-link-plus>
    <!-- 侧边栏场景 -->
    <el-link-plus
        to="/notifications"
        :adaptive-width="true"
        :ellipsis="true"
        pre-icon="el-icon-message"
        class="sidebar-link"
    >
      未读消息通知（共15条未读）
    </el-link-plus>

    <!-- 紧凑导航场景 -->
    <el-link-plus
        href="#"
        ellipsis
        style="width: 120px"
    >
      这是一个超长的导航链接文本内容
    </el-link-plus>
  </div>
</template>

<script>
/**
 * 演示 ElLinkPlus 组件各种用法的示例组件
 * @module components/ElLinkPlusExample
 */
import ElLinkPlus from './elLinkPlus.vue';  // 请根据实际路径调整

export default {
  name: 'ElLinkPlusExample',
  components: {
    ElLinkPlus
  },
  data() {
    return {
      // 示例数据可根据需要添加
    };
  },
  methods: {
    // 示例方法可根据需要添加
    onBeforeClick(e) {
      // 这里可以进行埋点统计或二次确认操作
      const confirmResult = confirm('确定要跳转吗？')
      return confirmResult
    },
    onClick(e) {
      // 这里可以进行埋点统计等操作
      console.log(' 链接已点击')
    },
    onAfterClick(e) {
      // 这里可以进行埋点统计等操作
      console.log(' 链接已点击完毕')
    }
  }
};
</script>

<style scoped>
/* 可以根据需要添加样式 */
/* 自定义样式 */
.custom-link {
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.brand-link:hover {
  transform: translateY(-1px);
}

.bold-text {
  font-weight: 700;
}
</style>